	<!--[if IE]><script language="javascript" type="text/javascript" src="../include/flot/excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../include/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../include/flot/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="../include/flot/jquery.flot.selection.js"></script>



<!--start:CURRENT!-->
			 <div id="placeholder" style="width:700px;height:250px;"></div>
			 <div id="overview" style="margin-top:20px;width:600px;height:50px; display:none;"></div>
			<div id="clearer"></div>
			<!--stop:CURRENT!-->	
			
			
			

$(function () {
	    var d = [[1263250800000, 77], [1263423600000, 73]];
	
	    // first correct the timestamps - they are recorded as the daily
	    // midnights in UTC+0100, but Flot always displays dates in UTC
	    // so we have to add one hour to hit the midnights in the plot
	    for (var i = 0; i < d.length; ++i)
	      d[i][0] += 60 * 60 * 1000;
	
	    // helper for returning the weekends in a period
	    function weekendAreas(axes) {
	        var markings = [];
	        var d = new Date(axes.xaxis.min);
	        // go to the first Saturday
	        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
	        d.setUTCSeconds(0);
	        d.setUTCMinutes(0);
	        d.setUTCHours(0);
	        var i = d.getTime();
	        do {
	            // when we don't set yaxis, the rectangle automatically
	            // extends to infinity upwards and downwards
	            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
	            i += 7 * 24 * 60 * 60 * 1000;
	        } while (i < axes.xaxis.max);
	
	        return markings;
	    }
	    
	    var options = {
	        xaxis: { mode: "time" },
	        selection: { mode: "x" },
	        grid: { markings: weekendAreas }
	    };
	    
	    var plot = $.plot($("#placeholder"), [d], options);
	    
	    var overview = $.plot($("#overview"), [d], {
	        series: {
	            lines: { show: true, lineWidth: 1 },
	            shadowSize: 0
	        },
	        xaxis: { ticks: [], mode: "time" },
	        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
	        selection: { mode: "x" }
	    });
	
	    // now connect the two
	    
	    $("#placeholder").bind("plotselected", function (event, ranges) {
	        // do the zooming
	        plot = $.plot($("#placeholder"), [d],
	                      $.extend(true, {}, options, {
	                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
	                      }));
	
	        // don't fire event on the overview to prevent eternal loop
	        overview.setSelection(ranges, true);
	    });
	    
	    $("#overview").bind("plotselected", function (event, ranges) {
	        plot.setSelection(ranges);
	    });
	});